<template>
  <div>
    <p ref="p">msg: {{ msg }}</p>
    <p>msg2: {{ msg2 }}</p>
    <button @click="update">更新msg</button>
  </div>
</template>

<script>
export default {
  name: 'NextTickTest',

  data () {
    return {
      msg: 'abc',
      msg2: 'xxx'
    }
  },
  methods: {
    update () {
      this.$nextTick(() => { // 也是异步执行
        alert(this.$refs.p.innerText)
      })
      this.msg2 = 'yyyy'  // 第一个数据更新才会执行nextTick()
      // 得到更新后的p标签
      // alert(this.$refs.p.innerText) // dom还没有更新
      // 利用$nextTick来操作更新后的界面
      this.$nextTick(() => { // 也是异步执行
        alert(this.$refs.p.innerText)
      })
      this.msg = 'cba'  // setter => 派发更新 => renderWatcher更新(异步执行)
    }
  }
}
</script>

<style scoped>

</style>
